import { FileUpIcon } from 'lucide-solid'
import { CloseButton, FileUpload, Input, InputGroup } from '@/components/ui'

export const App = () => {
  return (
    <FileUpload.Root gap="1.5">
      <FileUpload.HiddenInput />
      <FileUpload.Label>Upload file</FileUpload.Label>
      <InputGroup
        startElement={<FileUpIcon />}
        endElement={
          <FileUpload.ClearTrigger
            asChild={(triggerProps) => (
              <CloseButton size="xs" variant="plain" me="-2" {...triggerProps()} />
            )}
          />
        }
      >
        <Input
          asChild={(inputProps) => (
            <FileUpload.Trigger {...inputProps()}>
              <FileUpload.FileText lineClamp={1} />
            </FileUpload.Trigger>
          )}
        />
      </InputGroup>
    </FileUpload.Root>
  )
}
